<template>
	<view>

		<view class="fullscreen-bg">
			<!-- 在这里放置你的其他内容（会覆盖在背景图上） -->
			
			<!-- 内容 -->
			<view class="content"> 
				
				<view class="lists">
					<view class="list-area" v-for="(item,index) in gameList" :key="index"  @click="goGame(item,index)">
						<view class="imgs">
							<img style="width: 77%;" :src="item.image" alt="">
						</view>
						<view style="padding-bottom: 6px;">{{item.name}}</view>
					</view>
					
				</view>
			</view>
			</view>
			
			
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				gameList:[],
				tabAcitve:0,
				headerActive:0,
				tabList:[
					{
						name:'最新内容'
					},
					{
						name:'热门'
					},
					{
						name:'动态'
					}
				],
				headerList:[
					{
						name:'广场'
					},
					{
						name:'快讯'
					},
				],
				currentIndex: 1,
				listDate: [{
						pagePath: "/pages/home/home",
						iconPath: "/static/home/home.png",
						selectedIconPath: "/static/home/homeActive.png",

					},
					{
						pagePath: "/pages/family/family",
						iconPath: "/static/home/family.png",
						selectedIconPath: "/static/home/familyActive.png",
					},
					{pagePath:'/pages/my/myAccount?activeIndex=充值',
						iconPath: "/static/home/add.png",
						selectedIconPath: "/static/home/add.png",
					},
					{
						pagePath: "/pages/ranking/ranking",
						iconPath: "/static/home/ranking.png",
						selectedIconPath: "/static/home/rankingActive.png",
					},
					{
						pagePath: "/pages/my/my",
						iconPath: "/static/home/my.png",
						selectedIconPath: "/static/home/myActive.png",
					},
				]
			}
		},
		mounted() {
			
			this.getGameList()
		},
		methods: {
			goGame(item,index) {
				if(index == 6){
					uni.showToast({
						title: '暂未开放',
						duration: 2000
					});
				}
				
				else if(index == 7){
					uni.showToast({
						title: '暂未开放',
						duration: 2000
					});
				}
				else if(index == 4){
					uni.showToast({
						title: '暂未开放',
						duration: 2000
					});
				}
				else if(index == 5){
					uni.showToast({
						title: '暂未开放',
						duration: 2000
					});
				}
				else if(index == 8){
					uni.showToast({
						title: '暂未开放',
						duration: 2000
					});
				}else if(index ==9){
					uni.showToast({
						title: '暂未开放',
						duration: 2000
					});
				}
				else {
					location.href = item.link
				}
				
			},
			getGameList() {
				uni.$ice.post('user/game', {}, false).then(res => {
			
					this.gameList = res.data.list;
				}).catch(err => {})
			},
			btnHeader(e){
				this.headerActive=e
			},
			btnTab(path, index) {
				console.log('1212',path)
				this.currentIndex = index
				uni.navigateTo({
					url: path
				})
			}

		}
	}
</script>

<style scoped>
	.imgs{
		width: 100%;
		height: 80%;
		margin-left: 27px;
	}
	.list-area{
			width: 150px;
	      height: 137px;
	      background-color: #212437;
	      border-radius: 10px;
	      margin-left: 29px;
	      margin-top: 18px;
		  text-align: center;
	}
	.lists{
		    display: flex;
		    flex-wrap: wrap;
	}

	.content{
		width: 90%;
		margin: 0 auto;
		margin-top: 120rpx;
	}
	.user-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.user-top text {
		color: rgb(255, 255, 255);
		font-family: 阿里巴巴普惠体 2.0;
		font-size: 20px;
		font-weight: 700;
		line-height: 28px;

	}

	.tab-item:nth-child(3) .tab-icon {
		/* 选中第三个 Tab（中间的 add 图标） */
		width: 80px !important;
		/* 放大宽度 */
		height: 80px !important;
		/* 放大高度 */
		position: relative;
		top: -84rpx;
	}

	.footer-area {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 62px;
		/* line-height: 86px; */
		padding-top: 26px;
		display: flex;
		background-color: #212437;
		color: red;
		justify-content: space-around;
		padding-left: 16px;
		padding-right: 16px
	}

	.fullscreen-bg {
		position: fixed;
		/* 关键：固定定位 */
		top: 0;
		left: 0;
		width: 100vw;
		/* 100%视窗宽度 */
		height: 100vh;
		/* 100%视窗高度 */
		background-image: url('@/static/banner.png');
		/* 替换为你的图片路径 */
		background-size: cover;
		/* 图片拉伸填满容器 */
		background-position: center;
		/* 图片居中 */
		background-repeat: no-repeat;
		/* 禁止重复 */
	}

	.title {
		color: white;
		font-size: 24px;
		position: relative;
		/* 需要设置定位（relative/absolute） */
		z-index: 1;
		/* 确保文字在背景图上方 */
	}

	.tab-icon {
		width: 30px;
		height: 30px;
	}
</style>